<template>
  <transition name="slide">
    <div class="list">
      <van-nav-bar title="登录" leftText="返回" rightText="1" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />
      <!-- <div class="scroll-wrapper" :ref="scroll-wrapper">
        <cube-scroll ref="scroll" :data="items" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown"></cube-scroll>
      </div> -->
      <van-cell-group>
        <van-field
          v-model="username"
          label="用户名"
          placeholder="请输入用户名"
          error
        />
        <van-field
          v-model="phone"
          label="密码"
          placeholder="请输入手密码"
          error-message="密码格式错误"
        />
        <van-field
          v-model="phone"
          label="手机号"
          placeholder="请输入手机号"
          error-message="手机号格式错误"
        />
          <van-field
            center
            v-model="sms"
            label="短信验证码"
            placeholder="请输入短信验证码"
            icon="clear"
            @click-icon="sms = ''"
          >
            <van-button slot="button" class="sendmessage" size="small" type="primary">发送验证码</van-button>
          </van-field>
      </van-cell-group>
      <div class="btn">
        <div class="log">登录</div>
        <div class="reg">注册</div>
        <a class="forget">忘记密码？</a>
      </div>
      
      <router-view></router-view>
    </div>
  </transition>
  <!-- <div class="login">
    <van-nav-bar title="vantPull" leftText="返回" rightText="mint-ui下拉刷新" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />

  </div> -->
</template>

<script>
import Vue from 'vue';
import { Field } from 'vant';

Vue.use(Field);
export default {
  data () {
    return {
      items: [1, 2, 3, 4, 5],
      itemIndex: 5,
      phone:'',
      username:'',
      sms:'',
      options: {
        // swipeBounceTime: 200,
        // bounceTime: 200,
        pullUpLoad: {
          threshold: 0,
          txt: {
            more: '正在加载...',
            noMore: '没有更多数据了'
          }
        },
        pullDownRefresh: {
          threshold: 70,
          stop: 40,
          txt: '刷新成功'
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.push('/list/mint-pull')
    },
    handler () {
    },
    onPullingUp () {
      // 更新数据
      setTimeout(() => {
        if (Math.random() > 0.5) {
          // 如果有新数据
          let newPage = [
            'I am line ' + ++this.itemIndex,
            'I am line ' + ++this.itemIndex,
            'I am line ' + ++this.itemIndex,
            'I am line ' + ++this.itemIndex,
            'I am line ' + ++this.itemIndex
          ]

          this.items = this.items.concat(newPage)
        } else {
          // 如果没有新数据
          // this.$refs.scroll.forceUpdate()
        }
      }, 1000)
    },
    onPullingDown () {
      // 模拟更新数据
      setTimeout(() => {
        if (Math.random() > 0.5) {
          // 如果有新数据
          this.items.unshift('I am new data: ' + +new Date())
        } else {
          // 如果没有新数据
          // this.$refs.scroll.forceUpdate()
        }
      }, 1000)
    }

  }
}
</script>

<style lang="less">
.list {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  &.slide-enter-active,
  &.slide-leave-active {
    transition: all 0.3s;
  }
  &.slide-enter {
    transform: translate3d(100%, 0, 0);    
  }
  &.slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .scroll-wrapper {
    position: fixed;
    top: 46px;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
  }
}
.sendmessage{
  width: 50px;
  height: 30px;
  background: green;
}
van-button{
   width: 50px;
  height: 30px;
  background: green;
}
.btn{
  width: 80%;
  height: 30px;
  margin: 0 auto;
}
.log,.reg{
  float: left;
  width: 70px;
  height: 30px;
  text-align: center;
  background: rgb(59,144,235);
  border-radius: 5px;
  line-height: 30px;
  font-size: 20px;
  margin: 10px 20px;
}
.forget{
  color: blue;
  padding-top: 26px;
  float: left;
}
</style>
